<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>查看人员详情 </title>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
    <link rel="stylesheet" href="${path}yq-big/static/css/el-com.css">
    <link rel="stylesheet" href="${path}yq-big/static/css/style.css">

    <script src="//unpkg.com/vue@next"></script>
    <script src="//unpkg.com/element-plus"></script>
    <script src="//unpkg.com/@element-plus/icons-vue"></script>
    <script src="//unpkg.com/element-plus/dist/locale/zh-cn"></script>
    <script src="//unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="list">
      <big-form :form-detail="formDiaDetail" ref="formRef"></big-form>
    </div>
    <script type="module">
      import bigForm  from '/yq-big/components/form/bigForm.js'
      import request from '/yq-big/utils/request.js'
      let data=${@jsKit.parser(items)}
      const List = {
        data() {
          return {
            // formDiaDetail: ${@jsKit.parser(items)},
            formDiaDetail:{
              formArray:[
                {
                  type: 'input',
                  span: 24,
                  basicInfo: {
                    name: 'id',
                    label: 'ID',
                    default: data.id,
                  },
                  operation: {
                    readonly: true,
                  },
                },
                {
                  type: 'input',
                  span: 24,
                  basicInfo: {
                    name: 'name',
                    label: '姓名',
                    default: data.name,
                  },
                  operation: {
                    readonly: false,
                  },
                },
                {
                  type: 'input',
                  span: 24,
                  basicInfo: {
                    name: 'createTime',
                    label: '创建时间',
                    default: data.createTime,
                  },
                  operation: {
                    readonly: true,
                  },
                },
              ],
              operation:{
                detail:[
                  {
                    value: '提交',
                    type: 'primary',
                    plain: true,
                    beforeIcon: 'Search',
                    endIcon: 'Memo',
                    method: this.updateClick
                  }
                ],
                layout:{
                  align:'center'
                }
              }
            },
          }
        },
        components: {
          bigForm
        },
        methods:{
          updateClick(){
            let data=this.$refs.formRef.getFormData()
            request({
              url:'/native/edit',
              data: data,
              method: "put"
            }).then((res)=>{
              window.location = "http://127.0.0.1:8081/test/list";
            })
          },
        }
      };
      const list = Vue.createApp(List);
      list.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn,
      });
      for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        list.component(key, component)
      }
      list.mount("#list");
    </script>
  </body>
</html>